<template>
  <div >
 
    <el-form :model="form"   label-width="220px" style="border: 5px solid #dcdfe6; padding: 20px; margin-bottom: 20px; padding-left: 0px;">
        <!-- 添加的标题 -->
        <el-row style="margin-bottom: 20px;">
        <el-col :span="24">
          <div class="page-title">秦皇岛近海海洋环境信息系统</div>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="8">
          <el-form-item label="浮标名称：" class="large-label">
            <el-select v-model="buoyCoding" placeholder="请选择浮标">
              <el-option label="科师1号" value="0188"></el-option>
              <el-option label="科师2号" value="0031"></el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前日期：" class="large-label">
            <span class="red-text large-text">{{ currentDate}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前时刻：" class="large-label">
            <span class="red-text large-text">{{ currentTime}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form :model="form"   label-width="180px" style="border: 5px solid #dcdfe6; padding: 20px; margin-bottom: 20px;">
      <el-row >
        <el-col :span="4.8">
          <el-form-item label="气温:" class="large-label">
            <span class="large-text">{{ form.airTemAvg }} ℃</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="气压:" class="large-label">
            <span class="large-text">{{ form.pressureAvg }} Pa</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="湿度:" class="large-label">
            <span class="large-text">{{ form.humiAvg }} g/m³</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="风速:" class="large-label">
            <span class="large-text">{{ form.tenMinWindSpdA }} m/s</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="风向:" class="large-label">
            <span class="large-text">{{ form.tenMinWindDirA }} °</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4.8">
          <el-form-item label="水温:" class="large-label">
            <span class="large-text">{{ form.waterTem }} ℃</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="盐度:" class="large-label">
            <span class="large-text">{{ form.salinity }} Psu</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="叶绿素:" class="large-label">
            <span class="large-text">{{ form.yls }} μg/L</span>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4.8">
          <el-form-item label="溶解氧:">
            <span class="large-text">{{ form.oxygen }}</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="4.8">
          <el-form-item label="最大波高:" class="large-label">
            <span class="large-text">{{ form.maxWaveHigh }} m</span>
          </el-form-item>
        </el-col>
        <el-col :span="4.8">
          <el-form-item label="最大波向:" class="large-label">
            <span class="large-text">{{ form.waveDir }} °</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form>
      <el-row style="height: 520px;">
        <el-col  :span="18" style="height: 100%;">
          <seaPieLine :buoyCoding="buoyCoding" :buoyName="buoyName"></seaPieLine>
        </el-col>
        <el-col :span="6" style="height: 100%;padding-top: 20px;">
          <el-image 
            style="width: 100%; height: 340px; margin-top: 95px;"
            :src="imgSrc" 
            :preview-src-list="srcList">
          </el-image>
          <!-- <img :src="imgSrc" alt="Description of the image"  
           :style="{
          width: '100%',
          height:'340px',
          cursor: 'pointer',
          marginTop:'95px'
        }"
        @click="toggleZoom"> -->
        </el-col>
      </el-row>
    </el-form>
    <!-- 添加的底部信息 -->
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <div class="footer-info">河北科技师范学院 · 海洋科学研究中心</div>
      </el-col>
    </el-row>
    </div>
</template>

<script>
import {getBuyoData,getTabQIWEData,getTabQIYAData,getTabSHDUData,getTabFGALData,getTabSHZHData,getTabBLOGData} from "@/api/seadata/sea";
import seaPieLine from "@/views/dashboard/SeaPieChart";
import seacoordinateImg from '@/assets/seacoordinate.png'; 

  export default {
      name: "index",
      components: {
        seaPieLine
      },
      watch: {
        buoyCoding(newVal) {
          if (newVal) {
            this.getList(); // 当浮标编号变化时自动获取数据
          }
        }
      },
      data() {
        return {
          srcList:[seacoordinateImg],
          form: {
            buoyName: "",
            airTemAvg: "",
            pressureAvg: "",
            humiAvg: "",
            tenMinWindSpd: "",
            tenMinWindDir: "",
            waterTem: "",
            salinity: "",
            yLS: "",
            oxygen: "",
            maxWaveHigh: "",
            waveDir: "",
          },
          currentDate: this.parseTime(new Date(), '{y}-{m}-{d}'),
          currentTime: this.parseTime(new Date(), '{h}:{i}:{s}'),
          buoyCoding: "0031",
          buoyName: "",
          imgSrc: seacoordinateImg,
          isZoomed: false, //控制图片是否放大
        };
      },
      computed: {
      },
      created() {
        this.getList();
      },
      mounted() {
        // 每3分钟（180000毫秒）刷新一次1
        this.refreshInterval = setInterval(() => {
          this.getList();
        }, 180000);
        // 实时更新当前时间
        this.timeInterval = setInterval(() => {
          this.currentDate = this.parseTime(new Date(), '{y}-{m}-{d}');
          this.currentTime = this.parseTime(new Date(), '{h}:{i}:{s}');
        }, 1000);
      },
      beforeUnmount() {
        // 组件销毁前清除定时器，防止内存泄漏
        if (this.refreshInterval) {
          clearInterval(this.refreshInterval);
        }
        if (this.timeInterval) {
          clearInterval(this.timeInterval);
        }
      },
      methods: {
        getList(){
          getBuyoData({buoyCoding:this.buoyCoding}).then((response) => {
            this.buoyName=response.buoyName
            this.form.buoyName = response.buoyName
          })
          getTabQIWEData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.airTemAvg = response.airTemAvg
          })
          getTabQIYAData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.pressureAvg = response.pressureAvg
          })
          getTabSHDUData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.humiAvg = response.humiAvg
          })
          getTabFGALData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.tenMinWindSpdA = response.tenMinWindSpdA
            this.form.tenMinWindDirA = response.tenMinWindDirA
          })
          getTabSHZHData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.waterTem = response.waterTem
            this.form.salinity = response.salinity
            this.form.yls = response.yls
            this.form.oxygen = response.oxygen
          })
          getTabBLOGData({buoyCoding:this.buoyCoding}).then((response) => {
            this.form.maxWaveHigh = response.maxWaveHigh
            this.form.waveDir = response.waveDir
          })
        },
        handleQuery(){
          this.getList();
        },
        toggleZoom() {
          if (this.isZoomed) {
            this.isZoomed = false; // 如果当前是放大状态，则恢复为原图大小
          } else {
            this.isZoomed = true; // 否则，放大图片
          }
        }
  }
  }
</script>

<style scoped>
.red-text {
  color: rgb(246, 41, 82);
  background-color: transparent; /* 可选：去掉背景色 */
  border: none; /* 可选：去掉边框 */
}
.green-text {
  color: rgb(67, 5, 160);
  background-color: transparent; /* 可选：去掉背景色 */
  border: none; /* 可选：去掉边框 */
}
.large-text {
  font-size: 18px;
}
::v-deep.el-form-item.large-label .el-form-item__label {
  font-size: 20px;
}

.page-title {
  background: linear-gradient(to right, #00c6ff, #0072ff); /* 渐变蓝色 */
  color: white;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  border-radius: 8px;
  letter-spacing: 6px;
}

.footer-info {
  background: #f5f7fa; /* 浅灰色背景，与渐变风格协调 */
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 12px 0;
  border-top: 1px solid #e4e7ed;
  border-radius: 6px;
}
</style>